<template>
    <section id="banner" class="banner">
      <div class="banner-container">
        <div class="banner-content">
          <div class="profile-details">
            <h1 class="name">{{ profile.name }}</h1>
            <h2 class="title">{{ profile.title }}</h2>
            
            <div class="skills-badges">
              <span v-for="(skill, index) in profile.topSkills.slice(0, 5)" :key="index" class="skill-badge">
                {{ skill }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </template>
  
  <script setup>
  const props = defineProps({
    profile: {
      type: Object,
      required: true
    }
  });
  </script>
  
  <style lang="scss" scoped>
  @import '../styles/variables.scss';
  @import '../styles/responsive.scss';
  
  .banner {
    padding: 10rem 1.5rem 7rem 1.5rem;
    background: linear-gradient(170deg, #f9f9ff 0%, #f0f3ff 100%);
    border-bottom: 1px solid rgba($primary-color, 0.1);
    
    @include mobile {
      padding: 8rem 1rem 4rem 1rem;
    }
    
    &-container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    &-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .profile-details {
      text-align: center;
      max-width: 800px;
      
      .name {
        font-size: 2.2rem;
        margin-bottom: 0.3rem;
        color: $text-color;
        font-weight: 700;
        
        @include mobile {
          font-size: 1.8rem;
        }
      }
      
      .title {
        font-size: 1.2rem;
        color: $primary-color;
        font-weight: 500;
        margin-bottom: 1rem;
        
        @include mobile {
          font-size: 1rem;
        }
      }
    }
    
    .skills-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: center;
      
      .skill-badge {
        background-color: rgba($primary-color, 0.1);
        color: $primary-color;
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: $primary-color;
          color: white;
          transform: translateY(-3px);
        }
      }
    }
  }
  </style>